<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont" v-if="detail.id">
            <a-page-header @back="handleBack">
                <template #title>
                    <flexbox>
                        <a-tag color="blue" class="margin-r-16" v-if="detail.pmpProductDetailDTO.systemTag">{{ detail.pmpProductDetailDTO.systemTag }}</a-tag>
                        <flexbox style="height: 100%">
                            <span>【{{ detail.pmpProductDetailDTO.systemName }}】 {{ detail.requestName }}</span>
                            <a style="font-size: 14px; margin-left: 8px" @click="showDetail">详情</a>
                        </flexbox>
                    </flexbox>
                </template>
            </a-page-header>
            <div style="padding: 24px 0">
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane :key="0" tab="需求概貌">
                        <div style="padding: 12px">
                            <a-row :gutter="24">
                                <a-col :span="8">
                                    <a-card title="关联产品需求" style="width: 100%; height: 200px; margin-bottom: 12px">
                                        <div v-for="item of detail.pmpProductRequires" :key="item.id">
                                            <router-link :to="{ path: '/productRequire/productDetail', query: { id: item.id } }">
                                                {{ item.requireName }}
                                            </router-link>
                                        </div>
                                    </a-card>
                                </a-col>
                                <a-col :span="8">
                                    <a-card title="干系人" style="width: 100%; height: 200px">
                                        <p v-for="(item, index) of systemManagers" :key="index">{{ item.label }}：{{ item.value }}</p>
                                    </a-card>
                                </a-col>
                                <a-col :span="8">
                                    <a-card title="相关文档" style="width: 100%; height: 200px">
                                        <file-cell :border="false" :fileList="detail.selfRequestFiles" :span="24" :detail="detail" />
                                    </a-card>
                                </a-col>
                            </a-row>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane :key="1" tab="关系图">
                        <guanxi-tab :detail="detail" />
                    </a-tab-pane>
                    <a-tab-pane :key="2" tab="相关系统">
                        <xitong-tab :detail="detail" />
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { FileCell } from '@/components';
import GuanxiTab from '@/views/tool/fuyongku/proDetail/components/GuanxiTab.vue';
import XitongTab from '@/views/tool/fuyongku/proDetail/components/XitongTab.vue';
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { useRouter, useRoute } from 'vue-router';
import { ClockCircleOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
import Flexbox from '@/components/Flexbox/Flexbox.vue';
export default defineComponent({
    components: {
        ClockCircleOutlined,
        CloseCircleOutlined,
        CheckCircleOutlined,

        GuanxiTab,
        XitongTab,
        FileCell,
        Flexbox
    },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const { handleBack } = useRouterApi({
            backQuery: {
                path: '/setting'
            }
        });
        const state = reactive<any>({
            activeKey: 0,
            id: null,
            detail: {},
            systemManagers: []
        });
        const showDetail = () => {
            router.push({
                path: '/taskRequire/taskDetail',
                query: {
                    id: state.detail.id
                }
            });
        };
        const getDetailData = async () => {
            const query = {
                id: state.id
            };
            const { success, moule } = await api.pmpRequestInfoModel.getReuseBusinessInfo(query);
            if (success) {
                state.detail = {
                    ...moule
                };
                const systemManagers = moule.pmpProductDetailDTO?.pmpSystemManagers;
                state.systemManagers = [
                    { label: ' 产品负责人', value: systemManagers['产品经理'].map((item) => item.manager).join(',') },
                    { label: ' 项目经理', value: systemManagers['需求管理员'].map((item) => item.manager).join(',') },
                    { label: ' 业务方', value: moule.pmpProductDetailDTO.businessSide }
                ];
            }
        };

        state.id = route.query.id;
        getDetailData();

        return {
            ...toRefs(state),
            handleBack,
            showDetail
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>